<template>
  <view class="page">
    <view class="count-head">
      <Sub-title
        :label="`好评率 ${count.rate}%`"
        padding="0 0 26rpx 0"
        size="28rpx"
        :bold="false"
        border
      />
      <view>
        <view @click="onTag('')" class="cu-tag" :class="{ active: tag == '' }">
          全部 ({{ count.total || 0 }})
        </view>
        <view @click="onTag('good')" class="cu-tag" :class="{ active: tag == 'good' }">
          好评 ({{ count.good || 0 }})
        </view>
        <view
          @click="onTag('pertinent')"
          class="cu-tag"
          :class="{ active: tag == 'pertinent' }"
        >
          中评 ({{ count.pertinent || 0 }})
        </view>
        <view @click="onTag('poor')" class="cu-tag" :class="{ active: tag == 'poor' }">
          差评 ({{ count.poor || 0 }})
        </view>
        <view
          @click="onTag('figure')"
          class="cu-tag"
          :class="{ active: tag == 'figure' }"
        >
          有图 ({{ count.figure || 0 }})
        </view>
      </view>
    </view>
    <view class="comment-box" v-for="item in dataList" :key="item.id">
      <view class="userinfo">
        <view class="avatar">
          <u-avatar :src="item.user.avatar" size="35" />
          <view style="margin-left: 20rpx">
            <u-text
              :text="item.user.nickname || '用户昵称'"
              size="13"
              color="#222"
              lines="1"
            />
            <u-text
              :text="$TimeToDate(item.createtime) || '-'"
              size="13"
              color="#aaa"
              lines="1"
            />
          </view>
        </view>
        <u-rate
          :count="5"
          v-model="item.score"
          readonly
          size="16"
          gutter="2"
          active-color="#ff4e02"
          inactive-color="#cad0cc"
        />
      </view>
      <view class="details">
        <u-text :text="item.content" size="14" color="#222" line-height="40" />
        <u-text :text="`规格：${item.suk}`" size="14" color="#aaa" line-height="25" />
      </view>
      <view>
        <u-album :urls="item.images" multiple-size="230rpx" />
      </view>
    </view>
    <u-loadmore :status="status" height="60rpx" />
  </view>
</template>

<script>
import { mallGoodsComment } from "@/request/mallApi.js";
export default {
  data() {
    return {
      dataList: [], //列表
      count: {
        rate: 0,
        good: 0,
        pertinent: 0,
        poor: 0,
        figure: 0,
      }, //统计
      status: "loadmore", // 加载状态
      total: 0, //数据量
      page: 1, //当前页码
      goodsId: 0, //商品ID
      tag: "", //查询的标签
    };
  },
  onLoad(e) {
    this.goodsId = e.id;
    this.tag = e.tag ? e.tag : "";
    this.getDataList();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.getDataList();
  },
  onReachBottom() {
    //判断是否最后一页
    if (this.total > this.dataList.length) {
      this.page++;
      this.getDataList();
    }
  },
  methods: {
    getDataList() {
      //加载商品
      let data = {
        id: this.goodsId,
        page: this.page,
        tag: this.tag,
      };
      this.status = "loading";
      mallGoodsComment(data)
        .then((res) => {
          if (res.code == 1) {
            let comment = res.data.comment;
            this.dataList =
              this.page == 1 ? comment.data : this.dataList.concat(comment.data); //评论数据 追加
            this.total = comment.total; //数据量
            this.count = res.data.statistics; // 统计数据
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh();
          this.status = this.total == this.dataList.length ? "nomore" : "loadmore";
        });
    },
    // 根据评价筛选查询
    onTag(tag) {
      this.page = 1;
      this.tag = tag;
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: calc(100vh - 44px);
  background-color: #f7f7f7;
}
.count-head {
  padding: 26rpx;
  background-color: #fff;
  .cu-tag {
    height: 60rpx;
    background-color: #ffeee3;
    color: #383736;
    padding: 0 23rpx;
    font-size: 24rpx;
    margin: 25rpx 15rpx 0 0;
    border-radius: 40rpx;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
  }
  .active {
    background-color: #fe6600;
    color: white;
  }
}
.comment-box {
  margin: 25rpx 0;
  background-color: #fff;
  padding: 20rpx;
  .userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .avatar {
      display: flex;
      align-items: center;
    }
  }
  .details {
    margin: 20rpx 0;
  }
  .goods {
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    .cu-avatar {
      width: 120rpx;
      height: 120rpx;
    }
    .content {
      width: calc(100% - 145rpx);
    }
  }
}
</style>
